<template>
  <div class="dash-board dash-board-aging">
    <Row type="flex">
      <Col :span="24">
      <Panel ref="main" :charLoading="mainLoading || rateLoading" :enableMothly="false" :importData="panelData" :enableImport="true" :dataFilter="mFilter" :chartHeight="chartHeight" @fetching="fetchMainData" class="dash-panel-main" :param="paramDataMain" :model="model.date"
        main="true" @modeChange="modeChange" :extParam="extParam" :selectable="true" @paramChange="paramChange">
        <template slot-scope="tool" slot="tool" v-show="inflowValue!==null">
          <div class="total-wrapper">
          <span class="total-box">
            <span class="total-label">流入率</span>
            <span class="total-rate"><span class="total-rate-value" :style="{width:inflowValue}">&nbsp;&nbsp;{{inflowValue}}</span></span>
          </span>
          <span class="total-box">
             <span class="total-label">迁徙率累计</span>
            <span class="total-rate"><span class="total-rate-value" :style="{width:rateValue}">&nbsp;&nbsp;{{rateValue}}</span></span>
          </span>
          </div>
        </template>
        <template slot-scope="tool" slot="tool-right">
          <span class="filter-box">
            <Icon type="funnel"></Icon>
            <span class="filter-box-title">过滤条件</span>
            <span v-if="!assetMode">
              门店
              <Selector class="selector-merchant" @selectChange="filterChange" v-model="filter.merchant_set_ds_id" size="small" :path="path.merchant"></Selector>
            </span>
            <span class="filter-label">账龄</span>
            <Select class="selector-period" @selectChange="filterChange" v-model="mIndex" size="small">
              <Option v-for="item in mData" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
  
            <span class="filter-label">选择账单日</span>
            <DatePicker class="picker-pay-date" :transfer="true" @on-change="cmChange" v-model="cmDate" type="date" size="small" placement="bottom-end"
                :clearable="false"></DatePicker>
          </span>
        </template>
      </Panel>
      </Col>
    </Row>
  </div>
</template>

<script>
import Panel from "../panelTabChart";
import selectPanel from "@/components/selectPagePanel/index";
import model from "./agingModel";
import Selector from "@/components/selector";
import $ from "@/common";
import Time from "@/common/time";
export default {
  data() {
    return {
      model,
      monthly: false,
      path: {
        merchant: "/service/{app}/dataset/data/enum_manage_merchant_set",
        received: "/service/dw/statistics/received/period/daily",
        cm: "/service/dw/statistics/cm",
        inflow: "/service/dw/statistics/case/inflow"
      },
      extParam: {},
      assetMode: false,
      filter: {
        merchant_set_ds_id: null,
        pay_date: Time.toDate(new Date())
      },
      paramData: {
        pay_date: Time.toDate(new Date()),
        start_time: Time.preMonth(),
        end_time: Time.toDate(new Date())
      },
      flowRate: 0,
      paramDataMain: {},
      mainData: [],
      rateData: [],
      mainLoading: false,
      inflowData: [],
      rateLoading: false,
      inflowLoding: false,
      mIndex: 0,
      rateValue: 0,
      mData: [
        {
          name: "M0",
          id: 0
        },
        {
          name: "M1",
          id: 1
        },
        {
          name: "M2",
          id: 2
        },
        {
          name: "M3",
          id: 3
        },
        {
          name: "M4",
          id: 4
        },
        {
          name: "M5",
          id: 5
        },
        {
          name: "M6",
          id: 6
        }
      ],
      timeSet: {},
      cmDate: Time.toDate(new Date())
    };
  },
  computed: {
    chartHeight() {
      return window.innerHeight - 170;
    },
    mFilter() {
      return {
        overdue_period: this.mIndex
      };
    },
    inflowValue() {
      if (this.inflowData) {
        for (let item of this.inflowData) {
          if (item.overdue_period === this.mIndex) {
            return this.toPercent(item.inflow_balance_rate);
          }
        }
      }
      return "0%";
    },
    panelData() {
      var tempTimeSet = {};
      var tempRateTimeSet = {};
      var overdue_period = this.mIndex;
      var rateValue = 0;
      var mainData = this.mainData.filter(item => {
        if (item.overdue_period === overdue_period) {
          tempTimeSet[item.received_date] = true;
          return true;
        } else {
          return false;
        }
      });
      var rateData = this.rateData.filter(item => {
        if (item.overdue_period === overdue_period) {
          tempRateTimeSet[Time.toDate(item.statistics_date)] = true;
          if (item.today_transfer_balance_rate > rateValue) {
            rateValue = item.current_transfer_balance_rate;
          }
          return true;
        } else {
          return false;
        }
      });
      this.rateValue = this.toPercent(rateValue);
      for (let i in this.timeSet) {
        if (!tempTimeSet[i]) {
          mainData.push({
            received_date: i
          });
        }
        if (!tempRateTimeSet[i]) {
          rateData.push({
            current_transfer_balance_rate: 0,
            today_transfer_balance_rate: 0,
            received_date: i,
            statistics_date: Time.toTs(i)
          });
        }
      }
      return {
        data: mainData,
        grid: [rateData]
      };
    }
  },
  watch: {
    "filter.pay_date"() {
      this.fetchRateData();
    },
    "filter.merchant_set_ds_id"() {
      this.fetchRateData();
      this.fetchMainData();
    }
  },
  methods: {
    toPercent(v) {
      if (v && v !== "0") {
        v = ((v * 100).toFixed(4) + "").replace(/(\.?)(0*?)$/, "");
      } else {
        v = 0;
      }
      return v + "%";
    },
    fetchMainData() {
      this.mainLoading = true;
      $.link(this.path.received, {
        ...this.paramData,
        ...this.filter,
        ...this.extParam
      })
        .then(res => {
          var timeSet = {};
          for (let row of res.data) {
            timeSet[row.received_date] = true;
          }
          this.timeSet = timeSet;
          this.$set(this, "mainData", res.data);
        })
        .finally(() => {
          this.mainLoading = false;
        });
    },
    fetchRateData() {
      var param = {
        //statistics_start_date: this.paramData.start_time,
        //statistics_end_date: this.paramData.end_time,
        ...this.filter
      };
      if (
        param.merchant_set_ds_id === "" &&
        param.merchant_set_ds_id === undefined
      ) {
        param.merchant_set_ds_id = null;
      }
      this.rateLoading = true;
      this.inflowLoding = true;
      param = {
        param,
        ...this.extParam
      };
      $.link(this.path.cm, param)
        .then(res => {
          this.$set(this, "rateData", res.data);
        })
        .finally(() => {
          this.rateLoading = false;
        });
      $.link(this.path.inflow, param)
        .then(res => {
          this.$set(this, "inflowData", res.data);
        })
        .finally(() => {
          this.inflowLoding = false;
        });
    },
    filterChange() {
      this.fetchMainData();
    },
    cmChange(v) {
      this.filter.pay_date = v;
    },
    paramChange(v) {
      this.$set(this, "paramData", {
        ...this.paramData,
        pay_date: Time.toDate(this.cmDate),
        ...v
      });
    },
    merchantSelect(e) {
      if (e && e.data) {
        this.$set(this, "paramData", {
          ...this.paramData,
          merchant_set_ds_id: e.data.id
        });
      } else {
        this.$set(this, "paramData", {
          ...this.paramData,
          merchant_set_ds_id: null
        });
      }
      this.$set(this, "paramDataMain", {
        merchant_set_ds_id: this.paramData.merchant_set_ds_id
      });
    },
    modeChange(v) {
      this.monthly = v;
    }
  },
  created() {
    this.fetchRateData();
    var mainHeight = 35;
    this.model.date.grid = {
      containLabel: false,
      top: 54,
      left: 60,
      right: 20,
      height: mainHeight + "%",
      bottom: "auto"
    };
    this.model.date.grids[0].grid = {
      containLabel: false,
      top: this.chartHeight * mainHeight * 0.01 + 110,
      left: 60,
      right: 20,
      height: this.chartHeight - (this.chartHeight * mainHeight * 0.01 + 125),
      bottom: 0
    };
  },
  components: {
    Panel,
    Selector,
    selectPanel
  }
};
</script>

<style lang="less">
.dash-board-aging {
  .total-wrapper {
    position: absolute;
    top: 24px;
    left: 16px;
  }
  .select-list {
    width: 200px;
    margin-top: 4px;
    margin-bottom: 18px;
    margin-right: 20px;
    border-radius: 4px;
    .btn-cancel {
      padding: 8px 12px;
    }
  }
  .picker-pay-date.ivu-date-picker {
    width: 100px;
  }
  .selector {
    display: inline-block;
    margin-left: 4px;
  }
  .selector-merchant {
    display: inline-block;
    width: 140px;
  }
  .selector-period.ivu-select {
    display: inline-block;
    margin-left: 4px;
    width: 60px;
    .ivu-select {
      width: 60px;
    }
  }
  .select-list .select-list-body > .selct-list-wrapper {
    height: 233px;
    overflow-y: auto;
  }
  .select-list .ivu-card-head {
    border-bottom: 1px solid #e9eaec;
    padding: 8px 12px;
  }
  .tool-cm {
    margin-left: 16px;
    line-height: 26px;
  }
  .select-list .select-list-body .page-line {
    padding: 4px 8px;
    height: 30px;
  }
  .list-item {
    cursor: pointer;
  }
  .select-list
    .select-list-body
    > .selct-list-wrapper
    > .select-list-content
    > .list-item,
  .select-list
    .select-list-body
    > .selct-list-wrapper
    > .select-list-content
    .list-wrapper
    > .list-item {
    min-height: 31px;
    padding: 6px 12px;
    border-top: none;
    border-bottom: 1px solid #e9eaec;
  }
}
</style>
